<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*div{
            width: 100px;
            height: 100px;
            border: solid 1px red;
            margin-top: 10px;
        }*/
       /* #div2{
            position: absolute;
            top: 100px;
            left: 100px;
        }*/
      /*  #div2{
            position: relative;
            top: 100px;
            left: 100px;
        }*/
        div{
            border: solid 1px red;
        }
        #main{
            width: 500px;
            height: 500px;
            margin-top: 10px;
            position: relative;
            top: 100px;
            left: 100px;
        }
        #div1,#div2{
            width: 100px;
            height: 100px;
            margin-top: 10px;

        }
      #div1{
          position: absolute;
          top: 100px;
          left: 100px;
      }
        #div2{
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
<!--绝对定位（用于内层div,会脱离文档流） position:absolute：
          top / left
    相对定位：(用于外层div，不会脱离文档流) position:relative
          top / left
    固定定位i：（不会随页面的滚动而改变位置）position:fixed
          top / left
    -->

<!--<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>-->

<div id="main">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</div>
</body>
</html>